import { onMounted, Ref, ref } from 'vue'
export interface IFullScreenFn {
    requestFullscreen: () => void;
    exit: () => void;
    isFullScreen: Ref<boolean>;
}
// 全屏退出全屏
export const useFullScreen = (el: string | HTMLElement | Element | any): Promise<IFullScreenFn> => {
    return new Promise((reslove, reject) => {
        onMounted(() => {
            try {
                const isFullScreen = ref(false)
                el = typeof el === 'string' ? document.querySelector(el) : el
                const fullScreen =
                    el.requestFullscreen ||
                    el.webkitRequestFullScreen ||
                    el.mozRequestFullScreen ||
                    el.msRequestFullScreen
                const doc: any = document
                const exitFun =
                    doc.cancelFullScreen ||
                    doc.webkitCancelFullScreen ||
                    doc.mozCancelFullScreen ||
                    doc.exitFullScreen
                const requestFullscreen = function () {
                    fullScreen.call(el)
                    isFullScreen.value = true
                }
                const exit = function () {
                    exitFun.call(document)
                    isFullScreen.value = false
                }
                reslove({ requestFullscreen, exit, isFullScreen })
            } catch (error) {
                reject(error)
            }
        })
    })
}
